<template>
  <div class="order_set">
    <div class="body">
      <div class="content">
        <div class="sidebar">
          <div
            v-for="tab in tabOptions"
            :key="tab.value"
            :class="{ tab_item: true, active_tab_item: tab.value === activeName }"
            @click="useActiveTab().setActiveTab(tab.value)"
            >{{ tab.label }}</div
          >
        </div>
        <div class="main">
          <!-- 工单设置 -->
          <SetCard v-if="activeName === 'set'" ref="setCard" />

          <!-- 工单策略 -->
          <StrategyCard v-if="activeName === 'strategy'" ref="strategyCard" />

          <!-- 工单模块 -->
          <ModuleCard v-if="activeName === 'module'" ref="moduleCard" />

          <!-- 工单SLA -->
          <OrderSla v-if="activeName === 'OrderSLA'" ref="OrderSLA" />

          <!-- 费用设置 -->
          <order-cost-set v-if="activeName === 'cost'" ref="orderCostSetInstance" />

          <!-- 工单分配规则 -->
          <DealCard v-if="activeName === 'autoDeal'" ref="dealCard" />

          <!-- 自定义字段 -->
          <CustomField v-if="activeName === 'customField'" ref="cusField" />

          <!-- 自定义模板 -->
          <CustomModule v-if="activeName === 'customModule'" ref="customModule" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import SetCard from './components/SetCard/index.vue'
  import StrategyCard from './components/StrategyCard/index.vue'
  import ModuleCard from './components/ModuleCard/index.vue'
  import OrderCostSet from '@/components/pages/param-set/ordet-set/cost-set/OrderCostSet.vue'
  import DealCard from './components/DealCard/index.vue'
  import CustomField from './components/CustomField/index.vue'
  import CustomModule from './components/CustomModule/index.vue'
  import OrderSla from '../../../../sla/list/index.vue'
  import { ref, watch } from 'vue'
  import { useActiveTab } from '@/services/pages/order/set'
  import { OrderSetTab } from '@/services/pages/order/set/types'
  import routeComponentName from '@/config/route-component-name'

  defineOptions({
    name: routeComponentName.setting.orderSet,
  })

  const activeName = ref<OrderSetTab['TabType']>('set')
  const tabOptions: OrderSetTab['TabOptions'] = [
    {
      label: '工单设置',
      value: 'set',
    },
    {
      label: '工单策略',
      value: 'strategy',
    },
    {
      label: '工单模块',
      value: 'module',
    },
    {
      label: '工单SLA',
      value: 'OrderSLA',
    },
    {
      label: '费用设置',
      value: 'cost',
    },
    // {
    //   label: '工单分配规则',
    //   value: 'autoDeal',
    // },
    {
      label: '自定义字段',
      value: 'customField',
    },
    {
      label: '自定义模版',
      value: 'customModule',
    },
  ]

  const setCard = ref<InstanceType<typeof SetCard> | null>(null)
  const strategyCard = ref<InstanceType<typeof StrategyCard> | null>(null)
  const moduleCard = ref<InstanceType<typeof ModuleCard> | null>(null)
  const orderCostSetInstance = ref<InstanceType<typeof OrderCostSet> | null>(null)
  const dealCard = ref<InstanceType<typeof DealCard> | null>(null)
  const cusField = ref<InstanceType<typeof CustomField> | null>(null)
  const customModule = ref<InstanceType<typeof CustomModule> | null>(null)
  const OrderSLA = ref<InstanceType<typeof OrderSla> | null>(null)

  const activeNameChange = (tab: OrderSetTab['TabType']) => {
    setTimeout(async () => {
      switch (tab) {
        case 'set':
          if (setCard.value) {
            await setCard.value.getSet()
            await setCard.value.getCompletionTimeLimitStartNodeOptions()
            setCard.value.getCompletionTimeLimitEndNodeOptions()
          }
          break
        case 'strategy':
          strategyCard.value && strategyCard.value.getTeamList()
          break
        case 'module':
          moduleCard.value && moduleCard.value.getList()
          break
        case 'OrderSLA':
          OrderSLA.value && OrderSLA.value.getnetworkListRows()
          break
        case 'cost':
          // orderCostSetInstance.value && orderCostSetInstance.value.onTabChange()
          useActiveTab().setFeeCostActiveTab('orderCost')
          break
        case 'autoDeal':
          dealCard.value && dealCard.value.getCustomerList()
          break
        case 'customField':
          cusField.value && cusField.value.getList()
          break
        case 'customModule':
          customModule.value && customModule.value.getTempList()
          break
      }
    }, 0)
  }

  watch(
    () => useActiveTab().getActiveTab.value,
    (value) => {
      activeName.value = value
      activeNameChange(value)
    },
    { immediate: true },
  )
</script>

<style scoped lang="scss">
  @import './index';
</style>
